<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
    <script >
       // ES6 允许使用箭头函数 定义函数

       let fn = function(){

       }

       let fn1 = (a,b) =>{
           return a + b;
       }
       /*
        有什么区别

        1. this 是静态，this 始终指向函数声明时所在作用域下 this的值

       */

       function getName(){
           console.log(this.name);
       }
       let getName2 = () =>{
           console.log(this.name);
       }
       window.name = "pop";
       const shcc = {
           name:'pipi'
       }

       // 直接调用
       getName();//pop
       getName2();//pop

       // 使用call来强行this指向
       getName.call(shcc);//pipi
       getName2.call(shcc);//pop 依旧不会改变

       // 不能作为构造函数初始化
       let Person = (name,age) => {
           this.name = name;
           this.age = age;
       }
       const p = new Person('123',2)

       // 不能使用 arguments 变量
       let fn2 = () =>{
           console.log(arguments)
       }

       /*
       箭头函数的简写
        -省略小括号，当形参有且只有一个的时候
       */
      let add = n =>{
          return n+n
      }
      // 省略花括号，当代码体中只有一条数据的时候,此时return 必须省略
      let pow  = n => n*n;     

      /*
       两个小练习

       - 一个绑定事件的问题
      */

      const arr = document.getElementsByName("span");

      for(let i = 0;i<arr.length;i++){
            arr[i].addEventListener('click',function(e){
                // 几秒后变色
                let that = this;
                setTimeout(function(){
                    this.style.background = 'pink';
                    // 这些书写会报错，因为当点击事件触发后
                    // setTimeout 会被window调用，此时this指向的是window
                    // window对象并没有style属性，所以会报错
                    // 你当然可以把this定义出去,保存
                    that.style.background = 'pink';
                }, 2000);

                //所以我们可以切换成箭头函数
                setTimeout(() => {
                    // 此时由于箭头中的this指向的是定义箭头的时候上下文环境，也就是
                    // 元素本身，所以调用不是问题
                    this.style.background = 'pink';
                }, 2000);
            });
      }

      // 第二个案例，输出偶数
      const arr1 = [1,6,9,10,100,25]
      arr1.filter(item => item %2 ===0);

      /*
        箭头函数适合与 this 无关的回调，定时器，数组的回调，因为可以简化数学

        箭头函数不适合与this无关的回调，事件回调，和对象方法
        当然这是不适合，不是不能用，如果你的相关方法不涉及this方便的动作，也是可以调用的。
      
      */

    </script>
</body>

</html>